<template>
	<view class="app">
		<!-- #ifndef H5 || MP-ALIPAY -->
		<nav-bar backState="2000" type="transparentFixed" :scrollTop="scrollTop" fontColor="#FFF" transparentFixedFontColor="#FFF" :bgColor="['#1CBBB4','#8DC73F']" bgColorAngle="45" title="uni-fan"></nav-bar>
		<!-- #endif -->
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<!-- #ifndef MP-ALIPAY -->
		<view class="u-status-bar" :style="[{ height: statusBarHeight + 'px'}]"></view>
		<!-- #endif -->
		<view class="banner">
			<view class="banner-bg" v-bind:style="{backgroundColor: list[currentTab].slide_color}"></view>
			<view class="banner-cont">
				<view class="search-bar u-p-30">
					<navigator url="../HM-search/HM-search" style="width: 100%;">
						<u-search placeholder="搜索关键词" :show-action="false" bg-color="#fff"></u-search>
					</navigator>
				</view>
				<view class="banner-swiper u-p-l-30 u-p-r-30">
					<u-swiper :list="list" height="300" :circular="true" :indicator-pos="indicatorPos" @change="slideCG" @click="toMovieInfo(list[currentTab].slide_url)"></u-swiper>
				</view>
			</view>
		</view>
		<u-grid :col="5" :border="false">
			<u-grid-item @click="onPageJump('../myUni/waterfall')">
				<u-icon name="pubuliu" custom-prefix="uni-icon" :size="60" color="#FD6561"></u-icon>
				<view class="grid-text">瀑布流</view>
			</u-grid-item>
			<u-grid-item @click="onPageJump('../myUni/mallMenu')">
				<u-icon name="shangpin" custom-prefix="uni-icon" :size="60" color="#FD6561"></u-icon>
				<view class="grid-text">商场分类</view>
			</u-grid-item>
			<!-- #ifndef APP-PLUS -->
			<u-grid-item @click="onPageJump('../uCharts/domeList')">
				<u-icon name="tongjitu" custom-prefix="uni-icon" :size="60" color="#FD6561"></u-icon>
				<view class="grid-text">uCharts</view>
			</u-grid-item>
			<!-- #endif -->
			<u-grid-item @click="onPageJump('../mescroll/mescroll-swiper')">
				<u-icon name="xinwenzixun" custom-prefix="uni-icon" :size="60" color="#FD6561"></u-icon>
				<view class="grid-text">mescroll</view>
			</u-grid-item>
			<u-grid-item @click="onPageJump('../mescroll/goods')">
				<u-icon name="xinwenzixun" custom-prefix="uni-icon" :size="60" color="#FD6561"></u-icon>
				<view class="grid-text">goods</view>
			</u-grid-item>
		</u-grid>
		<view class="u-p-t-30 u-p-b-30 u-bg-gray">
			<u-section title="readMore" :right="false" line-color="#fa3534" font-size="36" color="#222a3f" :bold="false"></u-section>
		</view>
		<view class="u-bg-w">
			<view class="u-p-30">
				<u-read-more :toggle="true" show-height="200" ref="uReadMore">
					<!-- u-parse组件在微信小程序渲染慢，支付宝小程序rich-text不支持nodes属性 -->
					<!-- #ifdef MP-ALIPAY -->
					<u-parse :html="content"></u-parse>
					<!-- #endif -->
					<!-- #ifndef MP-ALIPAY -->
					<rich-text :nodes="content"></rich-text>
					<!-- #endif -->
				</u-read-more>
			</view>
		</view>
		<view class="u-p-t-30 u-p-b-30 u-bg-gray">
			<u-section title="swipeAction滑动删除" :right="false" line-color="#fa3534" font-size="36" color="#222a3f" :bold="false"></u-section>
		</view>
		<view class="wow bounceInLeft">
			<u-swipe-action :show="item.show" :index="index"
				v-for="(item, index) in swipeAction" :key="item.id" 
				@click="collection" @open="open"
				:options="options"
			>
				<view class="item u-border-bottom">
					<image mode="aspectFill" :src="item.images" />
					<view class="title-wrap">
						<text class="title u-line-2">{{ item.title }}</text>
					</view>
				</view>
			</u-swipe-action>
		</view>
		
		<u-gap height="80" bg-color="#f3f4f6"></u-gap>
		<!--返回顶部-->
		<!-- <u-back-top :scroll-top="scrollTop"></u-back-top> -->
		<z-navigation></z-navigation>
	</view>
</template>

<script>
	import zNavigation from '@/components/module/navigation.vue';
	// 获取系统状态栏的高度
	let systemInfo = uni.getSystemInfoSync();
	let _self;
	export default {
		components: {
			zNavigation
		},
		data() {
			return {
				statusBarHeight: systemInfo.statusBarHeight,
				titleBarHeight: systemInfo.titleBarHeight,
				scrollTop: 0,
				currentTab: 0,
				indicatorPos: "bottomRight",
				content: `浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。
					忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。千呼万唤始出来，犹抱琵琶半遮面。转轴拨弦三两声，未成曲调先有情。弦弦掩抑声声思，似诉平生不得志。低眉信手续续弹，说尽心中无限事。轻拢慢捻抹复挑，初为《霓裳》后《六幺》。大弦嘈嘈如急雨，小弦切切如私语。嘈嘈切切错杂弹，大珠小珠落玉盘。间关莺语花底滑，幽咽泉流冰下难。冰泉冷涩弦凝绝，凝绝不通声暂歇。别有幽愁暗恨生，此时无声胜有声。银瓶乍破水浆迸，铁骑突出刀枪鸣。曲终收拨当心画，四弦一声如裂帛。东船西舫悄无言，唯见江心秋月白。
					沉吟放拨插弦中，整顿衣裳起敛容。自言本是京城女，家在虾蟆陵下住。十三学得琵琶成，名属教坊第一部。曲罢曾教善才服，妆成每被秋娘妒。五陵年少争缠头，一曲红绡不知数。钿头银篦击节碎，血色罗裙翻酒污。今年欢笑复明年，秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故。门前冷落鞍马稀，老大嫁作商人妇。商人重利轻别离，前月浮梁买茶去。去来江口守空船，绕船月明江水寒。夜深忽梦少年事，梦啼妆泪红阑干。
					我闻琵琶已叹息，又闻此语重唧唧。同是天涯沦落人，相逢何必曾相识！我从去年辞帝京，谪居卧病浔阳城。浔阳地僻无音乐，终岁不闻丝竹声。住近湓江地低湿，黄芦苦竹绕宅生。其间旦暮闻何物？杜鹃啼血猿哀鸣。春江花朝秋月夜，往往取酒还独倾。岂无山歌与村笛？呕哑嘲哳难为听。今夜闻君琵琶语，如听仙乐耳暂明。莫辞更坐弹一曲，为君翻作《琵琶行》。感我此言良久立，却坐促弦弦转急。凄凄不似向前声，满座重闻皆掩泣。座中泣下谁最多？江州司马青衫湿。`,
				list: [{
						slide_color:'#C1AC8D',
						image: '/static/demo/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东',
						slide_url:'../myUni/home'
					},
					{
						slide_color:'#524326',
						image: '/static/demo/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通',
						slide_url:'../myUni/homea'
					}
				],
				swipeAction: [
					{
						id: 1,
						title: '长安回望绣成堆，山顶千门次第开，一骑红尘妃子笑，无人知是荔枝来',
						images: 'https://cdn.uviewui.com/uview/common/logo.png',
						show: false
					},
					{
						id: 2,
						title: '新丰绿树起黄埃，数骑渔阳探使回，霓裳一曲千峰上，舞破中原始下来',
						images: 'https://cdn.uviewui.com/uview/common/logo.png',
						show: false
					},
					{
						id: 3,
						title: '登临送目，正故国晚秋，天气初肃。千里澄江似练，翠峰如簇',
						images: 'https://cdn.uviewui.com/uview/common/logo.png',
						show: false,
					}
				],
				disabled: false,
				btnWidth: 180,
				show: false,
				options: [
					{
						text: '收藏',
						style: {
							backgroundColor: '#007aff'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				]
			}
		},
		//第一次加载
		onLoad(e) {
			_self = this;
			// 隐藏原生的tabbar
			uni.hideTabBar();
		},
		//页面加载完后
		mounted(){
			// #ifdef H5
			this.$wow.init();
			// #endif
		},
		//页面显示
		onShow() {
			// 隐藏原生的tabbar
			uni.hideTabBar();
		},
		methods: {
			slideCG(e) {
				this.currentTab = e;
			},
			collection(index, index1) {
				if(index1 == 1) {
					this.swipeAction.splice(index, 1);
					this.$u.toast(`删除了第${index}个cell`);
				} else {
					this.swipeAction[index].show = false;
					this.$u.toast(`收藏成功`);
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.swipeAction[index].show = true;
				this.swipeAction.map((val, idx) => {
					if(index != idx) this.list[idx].show = false;
				})
			},
			onClickBtn(data){
				uni.navigateTo({
					url: '../HM-search/HM-search'
				});
			},
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
			toMovieInfo(_url,id){
				var xid = id || '';
				uni.navigateTo({
					url: _url+'?id='+xid
				})
			},
			onTokenJump(url) {
				this.judgeLogin(() => {
					uni.navigateTo({
						url: url
					});
				});
			}
		},
		onPageScroll(e) {
			_self.scrollTop = e.scrollTop;
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	}
</script>

<style scoped lang="scss">
	.app{position: relative;}
	.grid-text {
		font-size: 25rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}
	.item {
		display: flex;
		padding: 20rpx;
	}
	
	image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
	}
	
	.title {
		text-align: left;
		font-size: 28rpx;
		color: $u-content-color;
		margin-top: 20rpx;
	}
	.u-card-wrap { 
		background-color: $u-bg-color;
		padding: 1px;
	}
	.u-bg-gray{
		background-color: $u-bg-color;
	}
	.u-bg-w{
		background-color: #fff;
	}
	.u-body-item {
		font-size: 28rpx;
		color: $u-content-color;
		padding: 20rpx 10rpx;
	}
		
	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}

	.banner{background-color: #fff;}
	.banner-cont {position:relative;}
	.banner-bg {position:absolute;left:0;top:0;width:100%;height:350upx;background-size:cover;background-position:center bottom;background-repeat:no-repeat;-webkit-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform:skew(0,-15deg);transform:skew(0,-15deg);-webkit-transition:background-color .5s;transition:background-color .5s;}
	/*  #ifdef MP-WEIXIN */
	.search-bar{padding: 10rpx 30rpx 30rpx !important;margin-right: 95px;}
	.banner-bg{height:400upx;}
	/*  #endif  */
	/*  #ifdef MP-ALIPAY */
	.banner-bg{height:400upx;}
	/*  #endif  */
	/*  #ifdef APP-PLUS  */
	.banner-bg{height:420upx;}
	/*  #endif  */
</style>